<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="basics">
          <el-form-item label="网站名称">
            <el-input
              v-model="form.appName"
              placeholder="请输入网站名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="网站地址">
            <el-input v-model="form.appUrl" placeholder="请输入网站域名" />
          </el-form-item>
          <el-form-item label="运营时间">
            <el-date-picker
              type="date"
              placeholder="请输入运营时间，进行计算天数"
              v-model="form.appDate"
              style="width: 100%"
              format="yyyy-MM-dd HH:mm:ss"
              @change="getTime"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="网站介绍">
            <editor v-model="form.blogIntroduce" :min-height="192" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="作者信息" name="author">
          <el-form-item label="作者" prop="author">
            <el-input v-model="form.author" placeholder="请输入作者名称" />
          </el-form-item>
          <el-form-item label="作者介绍">
            <editor v-model="form.authorIntroduce" :min-height="192" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱地址" />
          </el-form-item>
          <el-form-item label="微信">
            <el-input v-model="form.wechat" placeholder="请输入微信号" />
          </el-form-item>
          <el-form-item label="QQ">
            <el-input v-model="form.qq" placeholder="请输入QQ号" />
          </el-form-item>
          <el-form-item label="GitHub">
            <el-input v-model="form.github" placeholder="请输入GitHub" />
          </el-form-item>
          <el-form-item label="CSDN">
            <el-input v-model="form.csdn" placeholder="请输入CSDN" />
          </el-form-item>
        </el-tab-pane>
      </el-tabs>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listConfig, saveConfig } from "@/api/blog/config";
import Editor from "@/components/Editor";
export default {
  name: "Config",
  data() {
    return {
      activeName: "basics",
      form: {
        appName: null,
        appDate: null,
        appIcp: null,
        appUrl: null,
        authorIntroduce: null,
        blogIntroduce: null,
        csdn: null,
        email: null,
        github: null,
        qq: null,
        wechat: null,
      },
      rules: {
          email: [
              {required: true, message: '邮箱地址不可为空', trigger: 'blur'},
              {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]
      }
    };
  },
  components: {
    Editor,
  },
  mounted() {
    listConfig().then((res) => {
      if (res.code != 200) {
        this.$message({
          message: "加载表单数据失败",
          type: "error",
        });
        return false;
      }
      this.form = res.data;
      console.log(this.form);
    });
  },
  methods: {
    onSubmit() {
        this.$refs['form'].validate((valid)=>{
            if (!valid){
                console.log(this)
                return false;
            }    
        })
        saveConfig(this.form).then((res)=>{
          this.msgSuccess("修改成功");
        })
    },
    getTime(date) {
      this.form.appDate = this.parseTime(date);
    }
  },
};
</script>